<template>
  <div class="checkedTitle">
    <div
      v-show="title"
      :class="typeNumber == 1 ? 'checkedTitle_titles checkedTitle_title' : 'checkedTitle_title'"
      :style="{
        width: `${width}px`,
      }"
    >
      <!-- {{ title }} -->
      <slot name="title">{{ title }}</slot>
    </div>
    <div :class="fixed?'flex-'+fixed:'flex-center '" class="checklist flex align-items-center">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'checkedTitle',
  props: ['title'],
  props: {
    title: {
      type: String,
      required: false,
    },
    width: {
      type: Number,
      required: false,
    },
    typeNumber: {
      type: Number,
      required: false,
    },
    fixed: {
      type: String,
      required: false,
    },
  },
  data() {
    return {
    }
  },
}
</script>

<style lang="less" scoped>
.checkedTitle {
  width: 100%;
  // height: 5rem;
  position: relative;
  // padding-left: 1.6rem;

  .checkedTitle_title {
    width: 40rem;
    height: 5rem;
    font-size: 2rem;
    font-family: ShiShangZhongHeiJianTi;
    font-weight: 400;
    color: #dafcff;
    margin: 0 auto;
    background: url('../assets/images/title-back.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 4.4rem;
    display: block !important;
  }
  .checkedTitle_titles {
    background: url('../assets/images/titile.png') no-repeat;
    background-size: 100% 100%;
  }
  img {
    position: absolute;
    width: 40rem;
    height: 5rem;
    left: 0;
    top: 0;
    z-index: 99;
  }

  .title1 {
    width: 100%;
    font-size: 1.8rem;
    font-family: ShiShangZhongHeiJianTi;
    color: #ffffff;
    line-height: 4.2rem;
    text-align: center;
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .line {
    width: 100%;
    height: 0.2rem;
    background: #00acff;
    position: absolute;
    bottom: 0.2rem;
    left: 0;
  }

  .checklist {
    // color: #fff;
    margin-top: 1.5rem;
    // position: absolute;
    // right: 1rem;

    .title2 {
      background: rgba(31, 73, 135, 0.3);
      border: 1px solid rgba(35, 103, 255, 0.6);
      border-radius: 1rem;
      font-size: 1.2rem;
      font-family: Microsoft YaHei;
      color: #ffffff;
      text-align: center;
      // line-height: 1.8rem;
      margin-left: 0.5rem;
      padding: 0.2rem 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .title2.active {
      border-color: #3cffff;
    }
  }
}

// .checkedTitle::after {
// 	content: "";
// 	width: 0.6rem;
// 	height: 0.6rem;
// 	background: #3cffff;
// 	border-radius: 50%;
// 	position: absolute;
// 	bottom: 0;
// 	right: 0;
// }
</style>
